<template>
  <div v-bind:class="helloClass">
    <img width="10%" v-bind:style="imgObj" src="../../assets/img/login/webLogo.png">
    <h2 v-bind:style="[titleObj,titlePositionObj]">{{title}}</h2>
    <el-form class="demo-ruleForm">
      <el-form-item>
        <el-input type="text" v-model="username" v-bind:class="btnWidthClass" auto-complete="off"
                  placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input type="password" v-model="password" v-bind:class="btnWidthClass" auto-complete="off"
                  placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="text" v-bind:style="[forgetpasswordObj,titleObj]" @click="toForgetPassword">{{forgetpasswordmsg}}</el-button>
        <span v-bind:style="titleObj"> |</span>
        <el-button type="text" v-bind:style="[forgetpasswordObj,titleObj]" @click="toRegister">{{registermsg}}
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-bind:style="loginObj" @click="login">{{loginmsg}}</el-button>
      </el-form-item>
      <el
    </el-form>
  </div>
</template>

<script>

  export default {
    name: 'hello',
    data () {
      function test1 () {
        alert('dadadas')
      }

      return {
        title: '登入人才管理系统',
        username: '',
        password: '',
        forgetpasswordmsg: '忘记密码',
        registermsg: '注册账号',
        loginmsg: '登录',
        helloClass: 'hello',
        btnWidthClass: 'btnWidth',
        loginObj: {
          marginBottom: '20px',
          width: '300px'
        },
        forgetpasswordObj: {
          marginTop: '-20px'
        },
        titleObj: {
          color: 'white',
          fontFamily: 'Helvetica Neue'
        },
        imgObj: {
          marginLeft: '10%'
        },
        titlePositionObj: {
          marginLeft: '6%'
        }
      }
    },
    methods: {
      login () {
        localStorage.setItem('username', this.username)
        if (this.username === 'admin' && this.password === 'admin') {
          //login success
          this.$message({
            message: '登录成功!',
            type: 'success'
          })
          this.$router.push({path: '/'})
        }
      },
      toRegister () {
        this.$router.push({path: '/register'})
      },
      toForgetPassword () {

      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .hello {
    background-color: #00B289;
    padding-left: 40%;
    padding-top: 200px;
  }

  .btnWidth {
    width: 300px;
  }
</style>
